<template>
  <view>
    <u-navbar title="物流情况"></u-navbar>
    <view class="order-goods">
      <u-icon class="goods-img" :name="goodsInfo.picUrl" size="160"></u-icon>
      <view class="orde-riget">
        <view class="goods-title">
          {{ goodsInfo.spuName }}
        </view>
        <view class="goods-speci">
          {{ goodsInfo.properties.length > 0 ? goodsInfo.properties[0].valueName : '' }}
          <text class="goods-num">x{{ goodsInfo.count }}</text>
        </view>
        <view class="goods-price"> ¥{{ (goodsInfo.price * 0.01).toFixed(2) }} </view>
      </view>
    </view>

    <view class="step-box">
      <view class="step-item" v-for="(item, indexx) in step" :key="indexx">
        <view class="icon-line">
          <view v-if="item.step == currentStep" class="current-icon"></view>
          <view v-else class="icon"></view>
          <view class="line" v-if="item.step != 0"></view>
        </view>
        <view class="content-desc">
          <view class="step-content">{{ item.content }}</view>
          <view class="step-desc">{{ formatTime(item.time) }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      goodsInfo: {},
      goodsJosn: '',
      step: []
    }
  },
  onLoad(res) {
    this.id = res.id
    this.goodsInfo = JSON.parse(res.goodsJson)
    this.$u.get('/app-api/trade/order/get-express-track-list?id=' + res.id).then((res) => {
      this.step = res.data
    })
  },
  computed: {
    formatTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },
  methods: {
    routeTo(e) {
      uni.navigateTo({
        url:
          '/other/apply-after-sales/apply-after-sales?way=' +
          e +
          '&id=' +
          this.id +
          '&goodsJson=' +
          this.goodsJosn
      })
    }
  }
}
</script>

<style>
page {
  background: #f0f1f2;
  padding: 20rpx;
}
.order-goods {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.goods-img {
  border-radius: 20rpx;
}

.orde-riget {
  width: 100%;
  margin-left: 10rpx;
  line-height: 55rpx;
  font-size: 26rpx;
}

.goods-speci {
  position: relative;
}

.goods-num {
  position: absolute;
  top: 0;
  right: 0;
  color: #999999;
}

.goods-price {
  font-size: 30rpx;
  color: #f54831;
}

.item-view {
  height: 200rpx;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.item-view-desc {
  line-height: 50rpx;
  margin-left: 20rpx;
}
.item-view-desc view {
  font-size: 32rpx;
}
.item-view-desc p {
  color: #999999;
}
.more {
  margin-left: 140rpx;
}

.step-box {
  display: flex;
  flex-direction: column-reverse;
}

.step-item {
  display: flex;
  min-height: 100rpx;
  margin-top: 16rpx;
}
.icon-line {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.current-icon {
  width: 45rpx;
  height: 45rpx;
  border-radius: 45rpx;
  flex-shrink: 0;
  background-color: #0f76bc;
}

.icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 32rpx;
  flex-shrink: 0;
  background-color: #c4e1f5;
  margin-top: 5rpx;
}
.line {
  /* width: 2rpx;
			height: 78rpx;
			flex-shrink: 0;
			border-left: #C4E1F5 solid 2rpx;
			margin: 8rpx 0; */
}
.content-desc {
  flex: 9;
}
.step-content {
  font-size: 30rpx;
}
.step-desc {
  color: #999999;
  font-size: 25rpx;
  margin: 20rpx 0;
}
</style>
